<!-- 简介管理 仅机构可查看 -->
<template>
  <el-card class="app-container">
    <template v-if="JSON.stringify(form) != '{}'">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-suffix=":"
      >
        <el-form-item label="机构名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入机构名称" />
        </el-form-item>
        <el-form-item label="机构照片：" prop="photos">
          <picture-upload
            v-model="form.photos"
            type="photos"
            :limit="9"
            path="appliance"
            :value="form.photos"
            :file-list="photosfileList"
            @del-picture="delPicture_zp"
            @add-picture="addPicture_zp"
            :multiple="true"
          ></picture-upload>
        </el-form-item>
        
          <el-form-item label="机构证书：" prop="credential">
            <picture-upload
              v-model="form.credential"
              :limit="9"
              type="credential"
              path="appliance"
              :value="form.credential"
              :file-list="credentialfileList"
              @del-picture="delPicture_zs"
              @add-picture="addPicture_zs"
              :multiple="true"
            ></picture-upload>
          </el-form-item>
          <el-form-item label="机构资质：" prop="certification">
            <picture-upload
              v-model="form.certification"
              :limit="9"
              type="certification"
              path="appliance"
              :value="form.certification"
              :file-list="certificationfileList"
              @del-picture="delPicture_zz"
              @add-picture="addPicture_zz"
              :multiple="true"
            ></picture-upload>
           
          </el-form-item>
          <el-form-item label="机构简介" prop="description">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4 }"
              v-model="form.description"
              placeholder="请输入机构简介"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
          </el-form-item>
      </el-form>
    </template>
    <el-empty v-else description="请先完善机构信息！"></el-empty>
  </el-card>
</template>
  <script>
export default {
  name: "synopsis",
  components: {},
  data() {
    return {
      photosfileList: [],
      credentialfileList: [],
      certificationfileList: [],

      form: {
        name: null,
        photos: null,
        credential: null,
        certification: null,
        description: null,
      },
      rules: {},
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 根据用户id查询儿童康复救助机构信息
    async getInfo() {
      this.API.deleteRecoveryInstitutionById().then((res) => {
        this.form = res.data;
        // console.log("getInfo:", this.form);
      });
    },
    // 修改更新
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.API.updateRecoveryInstitution({ body: this.form })
            .then((res) => {
              console.log("res:", res);
              this.success("提交成功!");
            })
            .catch((err) => this.warning(err));
        } else {
          return false;
        }
      });
    },

    delPicture_zp(field,list) {
      this.form[field] = list;
      console.log(field,list);
    },
    delPicture_zs(field,list) {
      this.form[field] = list;
    },
    delPicture_zz(field,list) {
      console.log(field,list);
      this.form[field] = list;
    },
    addPicture_zp(res, field, fileList) {
      this.photosfileList.push(res);
    },
    addPicture_zs(res, field, fileList) {
      this.credentialfileList.push(res);
    },
    addPicture_zz(res, field, fileList) {
      this.certification.push(res);
    },
  },
};
</script>
    <style scoped lang="scss">
.app-container {
  padding-top: 20px;
  padding-right: 50px;

  .el-input {
    width: 400px;
  }

  .el-select {
    width: 300px;
  }
}
</style>
    